import 'package:flutter/material.dart';
import 'package:friends_flutter/pages/home_page/home_page_model.dart';
import 'package:friends_flutter/utils/ui.dart';
import 'package:get/get.dart';

import '../../routes/app_routes.dart';
import 'home_page_logic.dart';

class HomePagePage extends StatelessWidget {
  const HomePagePage({Key? key}) : super(key: key);

  static void startPage() {
    Get.toNamed(Routes.HOME);
  }

  @override
  Widget build(BuildContext context) {
    final logic = Get.find<HomePageLogic>();
    final state = Get.find<HomePageLogic>().state;

    return Scaffold(
      body: Container(
        margin: const EdgeInsets.symmetric(horizontal: 50),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Space(height: 80,),
            const Text('Select a character', style: TextStyle(fontSize: 18, color: Colors.black,fontWeight: FontWeight.bold),),
            Space(height: 20,),
            GridView.count(
                shrinkWrap: true,
                crossAxisCount: 2,
                mainAxisSpacing: 20,
                crossAxisSpacing: 20,
                childAspectRatio: 0.8,
                children: List.generate(state.homeList.length, (index) {
                  HomePageModel homePageModel = state.homeList[index];
                  return itemView(title: homePageModel.name, img: homePageModel.headImg, onTap: () {


                  });
                }),
            ),
          ],
        ),
      ),
    );
  }

  Widget itemView({required String title, required String img, required onTap}) {
    return GestureDetector(
      onTap: () {
        onTap();
      },
      child: Container(
        color: Colors.transparent,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Image.asset(img, width: 100, height: 100,),
            Space(height: 10,),
            Text(title, style: const TextStyle(fontSize: 15, color: Colors.black),),
          ],
        ),
      ),
    );
  }
}
